@extends('layouts.back_stage')
@section('content')
    <link rel="stylesheet" href="{{env('CDN_DOMAIN_NAME')}}/store/commoncss/element-2.4.1.css">
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/vue.js?v0.0.3"></script>
    <script src="{{env('CDN_DOMAIN_NAME')}}/store/commonjs/element-2.4.1.js"></script>
    <style>
       [v-cloak] {display: none;}
    </style>
    <div class="container">
        <div class="row">
            <div style="padding: 20px;">
                <h3 >添加管理员角色</h3>
            </div>
            <div class="col-md-12">
                <div id="app" v-cloak>
                    <el-row style="padding: 20px;background-color: #fff;overflow: hidden;">
                        <el-form label-width="80px" size="small">
                            <el-form-item label="用户名">
                                <el-input v-model="name" placeholder="请输入用户名"  maxlength="10" style="width:300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input v-model="phone" @keyup.native="phone_check"  maxlength="11" placeholder="请填写完整的手机号" style="width:300px;"></el-input>
                            </el-form-item>
                        <label>&nbsp;&nbsp;&nbsp;所属机构 &nbsp;&nbsp;</label>
                          <el-cascader style="width:300px;margin:0 0 20px 0" :options="companyList" v-model="company_id" :change-on-select="true" size="small"></el-cascader>
                           <br>
                        <label>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;部门名 &nbsp;&nbsp;</label>
                            <el-select  size="small" v-model="type" style="width:300px;margin:0 0 20px 0" class="ingred_sel" @focus="typeFocus" @change="typeValue">
                                <el-option  v-for="(item,index) in bumen" :key="item.index" :value="item.id"   :label="item.department"> @{{item.department}}</el-option>
                            </el-select>
                            <el-form-item label="角色名">
                                <el-select v-model="choose_role" style="width:300px" @focus="roleName"  @change="changeRole">
                                    <el-option v-for="item in role_name_list" :key="item.value" :label="item.label"  style="width:300px" :value="item.value"></el-option>
                                </el-select>
                                <el-button type="primary" @click="submit" style="float: right;">添加</el-button>
                            </el-form-item>
                        </el-form>
                        <el-collapse v-model="activeNames" size="mini" v-if="checkList != ''">
                            <el-collapse-item v-for="(item,index) in data" :title="item.name" :name="item.id" :key="item.id" v-show="checkShow(item.id)">
                                <el-card class="box-card" v-for="page in item.child" :key="page.name" style="margin-bottom:15px;" v-show="checkShow(page.id)">
                                    <div slot="header" class="clearfix">
                                        <span>@{{ page.name }}</span>
                                    </div>
                                    <div class="text item">
                                        <label v-for="box in page.child" :key="box.id">
                                            <el-tag v-show="checkShow(box.id)" style="margin-right:10px;">@{{box.name}}</el-tag>
                                        </label>
                                    </div>
                                </el-card>
                            </el-collapse-item>
                        </el-collapse>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
    <div id="validate"></div>
    @include('errors.list')
    <script>
        var app = new Vue({
            el:'#app',
            data() {
                return {
                    name:'',
                    phone:'',
                    company:'',
                    department:'',
                    choose_role:'',
                    bumen:[],
                    data:[],
                    type:'',
                    activeNames:[],
                    checkList:[],
                    role_name_list:[],
                    company_id:[],
                    companyId:'',
                    companyList:[],
                    commpadd:'',
                }
            },
            mounted(){
                this.getNode()
                this.getCompanyList();
            },
            methods: {
                //部门
                typeFocus(){
                    let that=this
                     if(this.company_id==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请先选择所属机构',
                        });
                        return false;
                     }
                     this.companyId=this.company_id[this.company_id.length-1]
                 $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: `/departments/getall?id=${this.companyId}`,
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                       that.bumen=res.content
                      }
                    })
                },
                typeValue(val){

                },
                //机构连级
                getCompanyList(){
                    let that=this
                    let list=[]
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                        'contentType':'application/json'
                    },
                    url: '/clients/getall',
                    type: 'get',
                    dataType: 'json',
                    success:res=>{
                        if(res.result.success){
                            for(let value of res.content[1]){
                                value['value'] = value.id
                                value['label'] = value.company_name
                                let child_data = res.content[1].filter((n) => n.pid == value.id && n.id != value.id)
                                if(child_data.length > 0){
                                    value['children'] = child_data
                                }
                            }
                            this.companyList = res.content[1].filter((n) => n.id == res.content[0])
                        }else{
                            this.$notify.error({
                                title: '错误',
                                message: res.result.errorMsg
                            })
                        }
                    }
                })
            },
              //角色
                roleName(){
                    let self = this
                    if(this.company_id==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请先选择所属机构',
                        });
                        return false;
                     }
                     this.companyId=this.company_id[this.company_id.length-1]
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: `/distribute/role/getall?id=${self.companyId}`,
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                let option = []
                                for(let value of res.content){
                                    option.push({"label":value.rolename,"value":value.id})
                                }
                                self.role_name_list = option
                            }else{
                               self.$notify.error({
                                    title: '提示',
                                    message: res.content.errorMsg,
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
                phone_check(){
                    this.phone=this.phone.replace(/[^\.\d]/g,'');
                    this.phone=this.phone.replace('.','');
                },
                changeRole(){
                    this.getChooseNode(this.choose_role)
                },
                //机构
                getNode(){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/nodeInfo',
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                let menu_option = []
                                res.content.menus.forEach(element => {
                                    let page_option = []
                                    let pages_data = res.content.pages
                                    for(var value in pages_data){
                                        if(value == element.id){
                                            let item_option = []
                                            for(let item_pages of pages_data[value]){
                                                let funs_data = res.content.funs
                                                let item_chilld = []
                                                for(let funs in funs_data){
                                                    if(funs == item_pages.id){
                                                        item_chilld = funs_data[funs]
                                                    }
                                                }
                                                item_option.push({"allChoose":false,"name":item_pages.name,"id":item_pages.id,"pid":item_pages.pid,"type":item_pages.type,"child":item_chilld})
                                            }
                                            page_option = item_option
                                        }
                                    }
                                    self.activeNames.push(element.id)
                                    menu_option.push({"name":element.name,"id":element.id,"pid":element.pid,"type":element.type,"child":page_option})
                                })
                                self.data = menu_option
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
                checkShow(id){
                    if(this.checkList.indexOf(id) == -1){
                        return false
                    }else{
                        return true
                    }                    
                },
                getChooseNode(role_num){
                    let self = this
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/role/has_node/'+role_num,
                        type: 'get',
                        data: {
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                self.roleName = res.content.data.rolename
                                let data = res.content.data.roles_node
                                data = data.split(',')
                                let numberData = []
                                for(let value of data){
                                    numberData.push(Number(value))
                                }
                                self.checkList = numberData
                            }else{
                                self.$notify({
                                    title: '提示',
                                    message:res.result.errorMsg
                                });
                            }
                            
                        },
                        error: function() {
                        }
                    });
                },
                submit(){
                    let self = this
                    let admin_name = self.name
                    let admin_tel = self.phone
                    let company_id = self.company
                    let department = self.type
                    let role_id = self.choose_role
                    if(!admin_name){
                        self.$notify.error({
                            title: '错误',
                            message: '请填写用户名'
                        });
                        return false
                    }
                    if(!(/^1[3456789]\d{9}$/.test(admin_tel))){
                        self.$notify.error({
                            title: '错误',
                            message: '手机号格式错误'
                        });
                        return false
                    }
                    if(this.company_id==''){
                        this.$notify.error({
                            title: '提示',
                            message: '请选择所属机构',
                        });
                        return false;
                    }
                    if(!role_id){
                        self.$notify.error({
                            title: '错误',
                            message: '请选择角色名'
                        });
                        return false
                    }
                    $.ajax({
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                        url: '/distribute/admin/store',
                        type: 'post',
                        data: {
                            admin_name:admin_name,
                            admin_tel:admin_tel,
                            company_id:self.companyId,
                            department:department,
                            roles_id:role_id,
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.result.success == true){
                                self.$notify({
                                    title: '成功',
                                    message: '添加成功',
                                });
                                setTimeout(() => {
                                    window.location.href="/distribute/admin/indexpage"
                                }, 1000);
                            }else{
                                self.$notify.error({
                                    title: '错误',
                                    message: res.result.errorMsg
                                });
                            }
                        },
                        error: function() {
                        }
                    });
                },
            },
        })
    </script>
@endsection